const RAF = window.requestAnimationFrame
const CancelRAF = window.cancelAnimationFrame

const scrollElement = el => {
  const maxScrollTop = el.scrollHeight - el.clientHeight

  // 直接在缓存滚动高度上进行计算
  el.cacheScrollTop =
    el.cacheScrollTop + el.speed >= maxScrollTop ? 0 : el.cacheScrollTop + el.speed

  // 将缓存高度设置为当前滚动高度
  el.scrollTo({
    top: el.cacheScrollTop
  })

  // 执行下一帧
  el.animationId = RAF(scrollElement.bind(null, el))
}

// 鼠标移入暂停
const mouseEnterHandler = el => {
  console.log('鼠标移入暂停')
  if (el.animationId) {
    CancelRAF(el.animationId)
    el.animationId = undefined
  }
}
// 鼠标移出继续运行
const mouseLeaveHandler = el => (el.animationId = RAF(scrollElement.bind(null, el)))

// 处理用户的滚动事件
const elementScrollHandler = el => (el.cacheScrollTop = el.scrollTop)

export default {
  name: 'scroll',
  mounted: (el, binding) => {
    // 页面首次加载时scrollHeight与clientHeight总是相等，why？
    console.log(el.scrollHeight, el.clientHeight, '>>>>>>>>>>>>>>>>>.')

    // const maxScrollTop = el.scrollHeight - el.clientHeight //判断是否滚动
    // if (maxScrollTop - 1 <= 0) {
    //   return
    // }

    // 滚动速度
    el.speed = binding.value || 1
    el.cacheScrollTop = 0
    el.animationId = RAF(scrollElement.bind(null, el))

    // PS:因为我们使用 cacheScrollTop 来代替 el.scrollTop 处理滚动高度，所以这里需要同步一下用户滚动操作后的 scrollTop ==> 而为了保持动画连贯与流畅，这里千万不要去防抖/节流！
    el.addEventListener('scroll', elementScrollHandler.bind(null, el))
    console.log(binding.modifiers.mouse, 'binding.modifiers.mouse>>>>.')
    // 鼠标移入暂停移出继续运动
    if (binding.modifiers.mouse) {
      el.addEventListener('mouseenter', mouseEnterHandler.bind(null, el))
      el.addEventListener('mouseleave', mouseLeaveHandler.bind(null, el))
    }
  },
  unmounted: (el, binding) => {
    if (binding.modifiers.mouse) {
      el.removeEventListener('mouseenter', mouseEnterHandler.bind(null, el))
      el.removeEventListener('mouseleave', mouseLeaveHandler.bind(null, el))
    }
  }
}
